<template>
  <div class="goods-list">
    <div class="goods-grid" v-for="item in list" :key="item.id" @click="handleDetail(item)">
      <div class="goods-image">
<!--        <van-image :src="item.showImg" fit="cover">-->
<!--          <template v-slot:loading>-->
<!--            <van-loading type="spinner" size="20" />-->
<!--          </template>-->
<!--        </van-image>-->
        <img :src="item.showImg" alt="" />
        <div class="tag" v-if="item.tag === '1' || item.tag === '3'">{{ $t("component.favoriteList.1") }}</div>
      </div>
      <div class="goods-info">
        <div class="goods-title text-ellipsis-2">{{ item.name }}</div>
        <div class="flex flex-justify-content-between mt10">
          <div class="goods-price">{{ item.price | num2Money }} KZ</div>
        </div>
        <div class="user-info mt5">
          <!-- <span class="text-ellipsis-2" v-html="item.des"></span> -->
          <span>{{ item.createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api";
import { Domain } from "@/constants";
export default {
  name: "GoodsRecommend",
  props: {
    categoryId: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      list: [],
      params: {
        pageSize: 5,
        pageNo: 1,
        categoryId: "",
      },
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      Api.goodsList({ ...this.params, categoryId: this.categoryId }).then((res) => {
        this.list = res.rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
      });
    },
    handleDetail(item) {
      this.$emit("handleDetail", item);
    },
  },
};
</script>
<style lang="less" scoped>
.goods-list {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  background-color: #f2f2f2;
  .goods-grid {
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    width: 40vw;
    flex: none;
    margin-right: 10px;
    .goods-image {
      width: 100%;
      height: calc(40vw - 18px);
      position: relative;
      background-color: #999;
      overflow: hidden;
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
      .tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .goods-info {
      padding: 8px;
      box-sizing: border-box;
      .goods-title {
        color: #595959;
        font-size: 14px;
        height: 35px;
      }
      .goods-price {
        color: #333;
        font-size: 14px;
        font-weight: bold;
      }
      .user-info {
        font-size: 12px;
        color: #333;
        display: flex;
        flex-direction: column;
        span {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
